<template>
  <div class="announcement">
    <div class="header">
      <span>通知公告</span>
      <div class="more" @click="handleClickMore()">
        <span>更多</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <van-skeleton row="3" :loading="loading">
      <div v-if="list.length > 0" class="list">
        <div v-for="item in list" :key="item.id" class="item" @click="handleClickItem(item.id)">
          <div class="title">
            <ZeEllipsis :content="item.title" />
          </div>
          <div class="time">
            {{ item.createTime.slice(0, -3) }}
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无数据" />
    </van-skeleton>
  </div>
</template>

<script>
import { getAnnouncementList } from '@/apis/announcement'
import ZeEllipsis from '@/components/ze-ellipsis/index.vue'
import { goToAnnouncementWebview } from '@/utils/webview'

export default {
  name: 'Announcement',
  components: { ZeEllipsis },
  data() {
    return {
      loading: true,
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        // 请求三条数据
        const res = await getAnnouncementList({ current: 1, size: 3 })
        this.list = res.records
      } finally {
        this.loading = false
      }
    },
    handleClickItem(id) {
      goToAnnouncementWebview(id)
    },
    handleClickMore() {
      uni.navigateTo({
        url: '/pages/announcement/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.announcement {
  margin: 8px 8px;
  background-color: #4a7eb9;
  color: #fff;
  padding: 9px;
  border-radius: 10px;

  .header {
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .more {
      font-size: 12px;
    }
  }

  .list {
    .item {
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 30px;

      .title {
        max-width: 60%;
      }
    }
  }
}
</style>
